<template>
  <div id="container">
    <section id="main">	
      <h1 class="headLine01">
        {{customerName}} 様
        <br/>
        予約施設一覧
      </h1>
        
        <div v-show="!facilitiesList.length">
            <li>予約施設データありません</li>
        </div>
        <div v-show="facilitiesList.length">
            <li v-for="(bulletinBoard, idx) in facilitiesList" :key="idx">
                {{bulletinBoard.facilityName}}
                <br/>
                予約開始　予約終了
                <div v-for="(reservation, idx2) in bulletinBoard.reservationList" :key="idx2">
		           	{{reservation.reservationFrom | DateTime}}
		           	{{reservation.reservationTo | DateTime}}
                </div>
            </li>
        </div>

    </section>
  </div>
</template>

<script>
import moment from 'moment'
export default {
	data() {
		return {
            customerName: '',
            facilitiesList:[]
		}
    },
    
	created() {
        this.customerName = this.Session.get('customerName');
        this.getInitData();
    },
    methods: {
        getInitData() {
            this.Api.get('reservation').then(res => {
                if (res.data.data) {
                    this.facilitiesList = res.data.data.facilitiesBeanList;
                }
            }).catch(err => {
            });
        }
    }
    
}
</script>
